<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Rolling Circles</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="550"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Parameters based on canvas size
  const R = 150;
  const r = R / 3;
  const oX = 250;
  const oY = 250;
  
  const pX = oX - R;
  const pY = oY;
  
  const cX = oX;
  const cY = oY + R - r;
  
  const aX = cX;
  const aY = cY + r;
  
  const bX = cX;
  const bY = cY - r;

  // Global styles
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;
  
  // Draw large circle
  ctx.beginPath();
  ctx.arc(oX, oY, R, 0, 2 * Math.PI);
  ctx.stroke();

  // Draw small circle
  ctx.beginPath();
  ctx.arc(cX, cY, r, 0, 2 * Math.PI);
  ctx.stroke();
  
  // Draw dashed line PO
  ctx.beginPath();
  ctx.setLineDash([5, 5]);
  ctx.moveTo(pX, pY);
  ctx.lineTo(oX, oY);
  ctx.stroke();

  // Draw dashed vertical line from O for angle mark
  ctx.beginPath();
  ctx.moveTo(oX, oY);
  ctx.lineTo(oX, oY + 40);
  ctx.stroke();
  ctx.setLineDash([]);
  
  // Draw 90 degree angle arc
  ctx.beginPath();
  ctx.arc(oX, oY, 30, Math.PI, 1.5 * Math.PI);
  ctx.stroke();
  
  // Draw solid vertical line ACB
  ctx.beginPath();
  ctx.moveTo(aX, aY);
  ctx.lineTo(bX, bY);
  ctx.stroke();

  // Draw points
  const pointRadius = 3;
  ctx.beginPath();
  ctx.arc(pX, pY, pointRadius, 0, 2 * Math.PI);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(oX, oY, pointRadius, 0, 2 * Math.PI);
  ctx.fill();
  
  ctx.beginPath();
  ctx.arc(aX, aY, pointRadius, 0, 2 * Math.PI);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(bX, bY, pointRadius, 0, 2 * Math.PI);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(cX, cY, pointRadius, 0, 2 * Math.PI);
  ctx.fill();
  
  // Draw labels
  ctx.font = 'italic 24px "Times New Roman"';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  
  ctx.fillText('P', pX - 20, pY);
  ctx.fillText('O', oX + 20, oY - 10);
  ctx.fillText('R', oX - R / 2, oY - 20);
  ctx.fillText('r', cX - 20, cY - r / 2);
  ctx.fillText('A', aX + 20, aY);
  ctx.fillText('B', bX + 20, bY - 10);
  ctx.fillText('C', cX + 15, cY + 5);

  ctx.font = '24px "Times New Roman"';
  ctx.fillText('90°', oX - 45, oY + 20);
  
  // Draw omega (ω) arrow for large circle
  ctx.font = 'italic 24px "Times New Roman"';
  const omega_r = R + 25;
  const start_angle_omega = -0.5 * Math.PI;
  const end_angle_omega = -0.15 * Math.PI;
  ctx.beginPath();
  ctx.arc(oX, oY, omega_r, start_angle_omega, end_angle_omega);
  ctx.stroke();
  
  let ah_x = oX + omega_r * Math.cos(end_angle_omega);
  let ah_y = oY + omega_r * Math.sin(end_angle_omega);
  let angle_tan = end_angle_omega + Math.PI/2;
  
  ctx.save();
  ctx.translate(ah_x, ah_y);
  ctx.rotate(angle_tan);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(-12, 5);
  ctx.moveTo(0, 0);
  ctx.lineTo(-12, -5);
  ctx.stroke();
  ctx.restore();
  
  ctx.fillText('ω', oX + R + 25, oY - 20);

  // Draw rotation arrow for small circle
  const arrowStartX = bX + 20;
  const arrowStartY = bY - 10;
  const arrowEndX = bX - 20;
  const arrowEndY = bY - 10;
  const controlY = bY - 30;
  // Arc
  ctx.beginPath();
  ctx.moveTo(arrowStartX, arrowStartY);
  ctx.quadraticCurveTo(bX, controlY, arrowEndX, arrowEndY);
  ctx.stroke();
  // T-bar
  ctx.beginPath();
  ctx.moveTo(arrowStartX, arrowStartY - 8);
  ctx.lineTo(arrowStartX, arrowStartY + 8);
  ctx.stroke();
  // Arrowhead
  ctx.beginPath();
  ctx.moveTo(arrowEndX, arrowEndY);
  ctx.lineTo(arrowEndX + 10, arrowEndY - 6);
  ctx.moveTo(arrowEndX, arrowEndY);
  ctx.lineTo(arrowEndX + 10, arrowEndY + 6);
  ctx.stroke();

  // Draw plane label
  ctx.font = '24px "Times New Roman"';
  ctx.textAlign = 'left';
  // Use a font stack that includes Chinese fonts
  ctx.font = 'italic 24px "Times New Roman", "SimSun", "KaiTi"';
  ctx.fillText('S', 50, 450);
  ctx.font = '24px "SimSun", "KaiTi"';
  ctx.fillText(' 平面', 65, 450);

</script>
</body>
</html>